<template>
  <div>
    <el-col :span="2">
      <div class="grid-content bg-purple">
        <el-form :inline="true" size="small" class="toolbar">
          <el-form-item>
            <el-button type="primary" @click="creat" :loading="load">新增课程</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
    <!--表格区-->
    <el-table :data="tableData" border style="width: 100%;" size="small">
      <template slot="empty">还没有数据呢~ (⊙︿⊙)</template>
      <el-table-column prop="courseName" label="课程名称" width="150" align="center"></el-table-column>
      <el-table-column prop="courseTeacher" label="教师名称" width="100" align="center"></el-table-column>
      <el-table-column prop="colloge" label="学院名称" width="150" align="center"></el-table-column>
      <el-table-column prop="coursetime" label="课程时间" width="70" align="center"></el-table-column>
      <el-table-column prop="synopsis" label="课程简介"  align="center">
        <template slot-scope="scope">
          {{scope.row.synopsis | ellipsis}}
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="课程编辑">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="edit(scope.row.courseid)">编辑课程</el-button>
          <el-button size="mini" type="primary" @click="video(scope.row.courseid,scope.row.img)">进入课程</el-button>
          <el-button size="mini" type="success" @click="goupload(scope.row.courseid)">发布作业</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页区-->
    <div class="Pagination" style="text-align: left; margin-top: 10px;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="limit"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { setStore } from "@/libs/storage";
import { getStore } from "@/libs/storage";
export default {
  data() {
    return {
      load: false,
      tableData: [],
      limit: 10,
      total: 0,
      currentPage: 1,
      formInline: {
        id: "",
        name: ""
      }
    };
  },
  created() {
    this.listByCategory();
  },
  methods: {
    //展示课程列表
    listByCategory() {
      //alert(1);
      this.$axios
        .post("/teachercour", {
          teacherid: getStore("teacherid"),
          status: "1"
        })
        .then(resp => {
          if (resp && resp.status === 200) {
            this.tableData = resp.data;
            return;
          }
        })
        .catch(failResponse => {
          console.log(getStore("userid"));
          console.log(failResponse.responseResult);
        });
    },

    //搜索课程
    getListData() {
      let form = {
        page: this.currentPage,
        limit: this.limit,
        id: this.formInline.id,
        name: this.formInline.name
      };
      this.$axios.get("/book/get-list", form).then(resp => {
        if (resp.code == 200) {
          this.tableData = resp.data;
          this.total = resp.total;
        }
      });
    },

    // 删除课程
    async del(id) {
      //询问是否删除
      const confirmResult = await this.$confirm(
        "此操作将删除该课程, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);

      //确认返回 confirm
      //取消返回 cancel
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }

      //发送请求
      this.$axios
        .post("/coursedeleted", {
          courseid: id
        })
        .then(resp => {
          if (resp && resp.status === 200) {
            this.$notify({
              title: "删除成功",
              message: "课程删除成功",
              type: "success"
            });
            this.listByCategory();
          }
        })
        .catch(failResponse => {});
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getListData();
    },
    onSearch() {
      this.getListData();
    },
    creat() {
      this.load = "true";
      this.$router.push("/creat");
    },
    edit(id) {
      this.$router.push("/edit" + "/" + id);
    },
    video(id,img) {
      console.log(img);
      setStore("img", img);
      this.$router.replace("/Coursecenter" + "/" + id);
    },
    goupload(id) {
      this.$router.push("/upload" + "/" + id);
    }
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 30) {
        return value.slice(0, 30) + "...";
      }
      return value;
    }
  }
};
</script>

<style scoped>
.toolbar {
  height: 40px;
}
</style>